<template>
    <div class="login_box">
        <div class="login_con">
            <h5>XX后台管理系统</h5>
            账号: <el-input v-model="input" placeholder=" 请输入账号 " /> <br>
            密码:<el-input class="pwd" v-model="password" placeholder=" 请输入密码 " />
            <el-button @click="submitLogin" type="success" round>登录</el-button>
            <el-button class="zhuce" @click="submitZhuce" type="warning" round>注册</el-button>
        </div>
    </div>
</template>
<script>
//固定的
import { defineComponent } from "vue";
//登陆请求
import { loginList } from "@/api/login";
// 需要用到router的方法
import { useRouter } from "vue-router";
const router = useRouter();

export default defineComponent({
    data() {
        return {
            password: "",
            input: "",
            router,
        };
    },
    methods: {
        submitLogin() {
            // 1 非空校验
            if (this.password === "" || this.input === "") {
                return ElMessage.error("输入框不能为空");
            }
            // 2 规则校验
            if (!/^\w{3,8}$/.test(this.input)) {
                return ElMessage.error("用户名不符合规则");
            }
            if (!/^\d{4,8}$/.test(this.password)) {
                return ElMessage.error("密码不符合规则");
            }
            //loginList是api里面接口
            loginList({
                username: this.input,
                password: this.password,
            }).then((res) => {
                if (res.status === 200) {
                    window.localStorage.setItem("token", res.data.data.token);
                    window.localStorage.setItem("username", res.data.data.username);
                    this.$router.push("/shouye");
                }
                console.log(res);
            });
        },
        //下面是跳转
        submitZhuce() {
            this.$router.push("./zhuce");
        },
    },
})
</script>



<style lang="scss" scoped>
.login_box {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(src/img/denglu.jpeg);
    background-repeat: no-repeat;
    background-size: 100%, 100%;


    .login_con {
        background-color: wheat;
        border-radius: 15px;
        width: 450px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        border-radius: 15px;
        text-align: center;

        .pwd {
            margin: 20px 0;
        }

        .zhuce {
            margin: 20px 0;
        }
    }

    h5 {
        text-align: center;
    }

    .el-button {
        width: 70%;
    }

    .el-input {
        width: 300px;
    }
}
</style>


